<template>
     <div class="shell" id="shell">
        <div class="header">
            <h2 class="title">Conquer_Solitude</h2>
            <h3 class="subtitle">BILIBILI</h3>   
        </div>
        <div class="timeline">
            <div class="item" data-text="《你很孤独，虽败犹荣》">
                <div class="content">
                    <img src="../../image/0.gif" alt="" class="img">
                    <h2 class="content-title">2019</h2>
                    <p class="content-desc">
                        如果你停止，就是谷底，如果你继续，
                        就是上坡，这是我听过关于人生低谷最好的阐述。
                    </p>
                </div>
            </div>
            <div class="item" data-text="《你很孤独，虽败犹荣》">
                <div class="content">
                    <img src="../../image/1.gif" alt="" class="img">
                    <h2 class="content-title">2020</h2>
                    <p class="content-desc">
                        如果你停止，就是谷底，如果你继续，
                        就是上坡，这是我听过关于人生低谷最好的阐述。
                    </p>
                </div>
            </div>
            <div class="item" data-text="《你很孤独，虽败犹荣》">
                <div class="content">
                    <img src="../../image/2.gif" alt="" class="img">
                    <h2 class="content-title">2021</h2>
                    <p class="content-desc">
                        如果你停止，就是谷底，如果你继续，
                        就是上坡，这是我听过关于人生低谷最好的阐述。
                    </p>
                </div>
            </div>
            <div class="item" data-text="《你很孤独，虽败犹荣》">
                <div class="content">
                    <img src="../../image/3.gif" alt="" class="img">
                    <h2 class="content-title">2022</h2>
                    <p class="content-desc">
                        如果你停止，就是谷底，如果你继续，
                        就是上坡，这是我听过关于人生低谷最好的阐述。
                    </p>
                </div>
            </div>
            <div class="item" data-text="《你很孤独，虽败犹荣》">
                <div class="content">
                    <img src="../../image/4.gif" alt="" class="img">
                    <h2 class="content-title">2023</h2>
                    <p class="content-desc">
                        如果你停止，就是谷底，如果你继续，
                        就是上坡，这是我听过关于人生低谷最好的阐述。
                    </p>
                </div>
            </div>
            <div class="item" data-text="《你很孤独，虽败犹荣》">
                <div class="content">
                    <img src="../../image/5.gif" alt="" class="img">
                    <h2 class="content-title">2024</h2>
                    <p class="content-desc">
                        如果你停止，就是谷底，如果你继续，
                        就是上坡，这是我听过关于人生低谷最好的阐述。
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="js" >
import"../css/timeline.css"
import"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"
import "../js/changeImg.js"
export default {
  mounted() {
    this.initTimeline();
  },
  methods: {
    initTimeline() {
      $("#shell").timeline();
    }
  }
};

</script>